import React, { Suspense } from 'react'
import './style.scss'
import Navs from "../../components/Navs.js";
// import Reservation from '../../components/Reservation.js'
import {
  Button
} from 'antd'

const Reservation = React.lazy(() => import('../../components/Reservation.js'))
const contColor = React.createContext('red')
const ref = React.createRef()
export default class Index extends React.Component {
  constructor(props) {
    super(props)
    this.handlClick = this.handlClick.bind(this)
    // this.detail = this.detail.bind(this)
    this.state = {
      list: [
        {
          name: '名称'
        }, {
          name: '名称1'
        }, {
          name: '名称2'
        }, {
          name: '名称3'
        }, {
          name: '名称4'
        }, {
          name: '名称5'
        }
      ],
      value: 37373
    }
  }

  componentDidMount() {
    console.log(ref.current, 'redff')
    var a = 0
    for (let i = 0; i < 2; i++) {
      setTimeout(() => {
        a = a + i
      })
      console.log(a)
    }
  }

  handlClick (val) {
    if (val === 1) {
      this.props.history.push({
        pathname: '/home',
        query: {
          value: 111
        }
      })
    } else {
      this.props.history.push({
        pathname: '/about',
        query: {
          value: 111
        }
      })
    }
  }

  detail (val, num) {
    console.log(val, num)
    this.state.list.splice(num, 1)
    this.setState({list: this.state.list})
  }


  render () {
    return (
      <div className="index">
        {
        }
        <Button type="primary" onClick={() =>this.handlClick(1)}>home页面</Button>
        <Button type="primary" onClick={() =>this.handlClick(2)}>about页面</Button>
        <span>这是首页</span>
        <Navs name={this.state.value} ref={ref} value={232}>
          <h3>这玩意是标题</h3>
        </Navs>
        <ul>
          {
            this.state.list.map((item, index) => (
              <li key={index} onClick={this.detail.bind(this, item, index)}>{item.name}-{}</li>
            ))
          }
        </ul>
        <Suspense fallback={<div>Loading...</div>}>
          <contColor.Provider value="blue">
            <Reservation></Reservation>
          </contColor.Provider>
        </Suspense>
      </div>
    )
  }
}